@mixin item
  @include thumbnail
  .corner-item
    @include item-corner
  .info-bottom
    padding-top: 4px
  //1
  @media (max-width: 480px)
    width: 100%
    margin: 0 0 16px 0
    .caption
      width: 60%
      float: left
      border-top: none
      height: 83px

  //3
  @media (min-width: 481px) and (max-width: 767px)
    width: 31%
    margin: 0 1.16% 18px
  //4
  @media (min-width: 768px) and (max-width: 991px)
    width: 23%
    margin: 0 1% 18px
  //5
  @media (min-width: 992px) and (max-width: 1199px)
    width: 18.6%
    margin: 0 0.7% 18px
  //5
  @media (min-width: 1200px) and (max-width: 1251px)
    width: 18.79%
    margin: 0 0.6% 18px
  //6
  @media (min-width: 1252px) and (max-width: 1500px)
    width: 15.46%
    margin: 0 0.6% 18px
  //7
  @media (min-width: 1501px) and (max-width: 1750px)
    width: 13.25%
    margin: 0 0.5% 18px
  //8
  @media (min-width: 1751px)
    width: 11.70%
    margin: 0 0.4% 18px

@mixin items
  margin-bottom: 10px
  padding: 0
  @include center-block
  @media (max-width: $screen-xs-max)
    padding: 0
  li
    @include item
    &:hover
      @include box-shadow (0 2px 8px 0px rgba(0, 0, 0, 0.03))
      @include transition (all 0.2s ease 0s)
      transform: scale(1.05)
      -ms-transform: scale(1.05)
      -webkit-transform: scale(1.05)
    a
      &.focus
        padding: 0 !important


// corner left
@mixin item-corner
  position: absolute
  width: 88px
  height: 88px
  z-index: 2
  overflow: hidden
  @include border-top-left-radius(4px)
  .corner-item2
    position: absolute
    color: transparent
    height: 72px
    width: 72px
    left: 0px
    top: 0px
    z-index: 4
    -webkit-border-top-left-radius: 5px
    -moz-border-radius-topleft: 5px
    border-top-left-radius: 5px
    overflow: hidden

    .corner-color
      position: absolute
      width: 0
      height: 0
      border-style: solid
      border-width: 72px 72px 0 0
      z-index: 5
      @media (max-width: 480px)
        border-width: 50px 50px 0 0
    i
      position: absolute
      top: 9px
      left: 9px
      color: $white
      font-size: 22px
      z-index: 6
      height: 26px
      width: 26px
      @media (max-width: 480px)
        width: 0
        height: 0
        border-width: 72px 72px 0 0
        z-index: 5
        font-size: 13px
    i.fa-scorm-o,
    i.fa-webapp-o,
    i.fa-swf-new
      top: 7px
      left: 6px

    i.fa-user
      color: $gray
 
  .fa-webapp
    top: 8px !important
    left: -3px !important

  .corner-background
    position: absolute
    width: 0
    height: 0
    border-style: solid
    border-width: 73px 73px 0 0
    border-color: $border-color transparent transparent transparent
    z-index: 3
    top: 0px
    left: 0px
    @media (max-width: 480px)
      border-width: 50px 50px 0 0

@mixin logo-img
  img
    float: left
    padding: 3px 0px
    margin-right: 15px
    @include opacity (0.7)
    &:hover
      @include opacity (1)